Fix rendering issue with globe view at high zoom #1831
Conversation
| map.transform = tr; | ||
| map.transform.projection = savedProjection; |
There was a problem hiding this comment.
Looks like the auto switching of projection happens in map._render:
Would it make more sense for us to match the two transforms in
react-map-gl/src/mapbox/mapbox.ts
Line 884 in bf55149
tr.projection = this._map.transform.projection?
There was a problem hiding this comment.
I tried that initially, and while it fixes the rendering issue, it introduces a bug where the map position jumps on zooming out past the Mercator/Globe threshold.
Screen.Recording.2022-04-26.at.4.16.07.PM.mov
There was a problem hiding this comment.
I have seen the same issue in matching elevation between the two transforms. In addition to assigning
tr.projection = this._renderTransform.projection
You may also need to call _calcMatrices() on the transform.
There was a problem hiding this comment.
Thank you, I'll give that a try!
|
@Pessimistress Just wanted to check in on the status of this PR! Do you have any other concerns that I can address? It would be great to have this fixed before the mapbox-gl-js globe release coming later this month. |
|
Can you provide steps I can follow to test this feature? |
|
@Pessimistress Thank you for the quick response! You can install the globe alpha with I've also been able to test the development version of
import mapboxgl from '!mapbox-gl';
...
<Map
mapLib={mapboxgl}
projection="globe"
...
>
</Map>Hope that helps! |
|
Testing this again, it seems this has since been fixed by #1841! Many thanks @Pessimistress! 🙏 |
Fixes mapbox/mapbox-gl-js#11750
In the upcoming globe projection in mapbox-gl-js, the projection automatically transitions to Mercator at high zoom levels. When used with react-map-gl, this created an inconsistent state where between
Mapbox._renderTransform.projectionwould be correctly set to Mercator butMapbox._map.transform.projectionwould be reset to globe at every update, creating strange rendering artifacts.This PR provides a fix by preserving
projectionfrom the previous state of the transform.Before:
Screen.Recording.2022-04-18.at.4.18.54.PM.copy.mov
After:
Screen.Recording.2022-04-15.at.5.05.34.PM.copy.mov